<!--
 * @Author: Chuckie
 * @Email: chuckie@aliyun.com
 * @Date: 2022-11-10 14:35:49
 * @LastEditTime: 2023-04-04 16:16:36
 * @Description: 
 * @FilePath: /web/src/views/basic/log/list.vue
 *  
-->
<template>
  <div class="app-container scroll-y">
    <!--操作-->
    <div class="page-filter rowSS">
      <!--条件搜索-->
      <el-form ref="refsearchForm" :inline="true" class="demo-searchForm">
        <el-form-item :label="$t('basicLog.search.logType')">
          <el-select v-model="state.filter.type" clearable @clear="onSelect" :placeholder="$t('common.search.placeholder.select')">
            <el-option label="接口日志" value="INTERFACE" />
            <el-option label="业务日志" value="BUSINESS" />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('common.search.dateRange')">
          <el-date-picker
            v-model="state.daterange"
            value-format="YYYY-MM-DD"
            type="daterange"
            range-separator="至"
            :start-placeholder="$t('common.search.placeholder.beginDate')"
            :end-placeholder="$t('common.search.placeholder.endDate')"
            @change="changeDate"
            @clear="changeDate"
          />
        </el-form-item>
      </el-form>

      <!--查询按钮-->
      <el-button type="primary" :disabled="state.table.loading" @click="onSelect">
        <el-icon style="vertical-align: middle">
          <Search />
        </el-icon>
         <span style="vertical-align: middle">{{$t('common.search.search')}}</span>
      </el-button>
    </div>

    <!--数据-->
    <div id="print-box" class="page-data">
      <el-table
        v-loading="state.table.loading"
        :data="state.table.dataSource"
        :border="true"
        stripe
        table-layout="auto"
      >
        <el-table-column type="index" width="50" :label="$t('common.table.serialNumber')" align="center" fixed />
        <el-table-column :label="$t('basicLog.search.logType')">
          <template #default="scope">
            {{ scope.row.type == 'INTERFACE' ? '接口日志' : '业务日志' }}
          </template>
        </el-table-column>
        <el-table-column property="requestUrl" :label="$t('basicLog.table.URL')" />
        <el-table-column property="operation" :label="$t('basicLog.table.description')" />
        <el-table-column property="content" :label="$t('basicLog.table.content')" />
        <el-table-column property="username" :label="$t('basicLog.table.operator')" />
        <el-table-column property="datetime" :label="$t('basicLog.table.operateTime')" />
      </el-table>
    </div>

    <div class="page-pagination">
      <el-pagination
        v-model:currentPage="state.pagination.pageNum"
        v-model:page-size="state.pagination.pageSize"
        :page-sizes="[20, 50, 100]"
        small="small"
        :disabled="state.table.loading"
        :background="true"
        layout="total, sizes, prev, pager, next, jumper"
        :total="state.pagination.total"
        @current-change="onSelect"
        @size-change="onSelect"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ElTable, dayjs } from 'element-plus'
import { Search } from '@element-plus/icons-vue'
import { Log, select } from './api/log'
import { onMounted, reactive } from 'vue'

const state = reactive({
  daterange: [dayjs().add(-7,'days').format('YYYY-MM-DD'),dayjs().format('YYYY-MM-DD')],
  filter: {
    type: '',
    startTime: '',
    endTime: ''
  },
  table: {
    loading: true,
    dataSource: [] as Log[]
  },
  pagination: {
    pageNum: 1,
    pageSize: 20,
    total: 0
  }
})

const changeDate = (date: string[]) => {
  state.filter.startTime = date ? date[0] : dayjs().add(-7,'days').format('YYYY-MM-DD')
  state.filter.endTime = date ? date[1] : dayjs().format('YYYY-MM-DD')
  onSelect()
}

const onSelect = async () => {
  state.table.loading = true
  const data = await select({ pageNum: state.pagination.pageNum, pageSize: state.pagination.pageSize, ...state.filter })
  state.table.dataSource = data.data.items
  state.pagination.total = data.data.total
  state.table.loading = false
}

onMounted(() => {
  onSelect()
})
</script>
